<script setup>
import {Setting,CircleClose} from "@element-plus/icons-vue"
import {ref, onBeforeMount, reactive,getCurrentInstance} from "vue"
import Add_model from "@/pages/settings/add_model.vue";
import Add_model_key from "@/pages/settings/add_model_key.vue";
import Default_setup from "@/pages/settings/default_setup.vue";
import {list} from "@/api/llm_factory"
import {list_llms, del, deletes} from "@/api/llm"
import { ElMessage, ElMessageBox } from "element-plus";
const selected = ref("2")
const dialogVisible = ref(false)
const modelList = reactive([])

const instance = getCurrentInstance();
const add_model_visible = ref(false)
const add_model_key_visible = ref(false)
const factory = ref("")
const llms = ref()

onBeforeMount(() => {
  list().then(res => {
    modelList.data = res.data
  })
  list_data()
})

const list_data = () => {
  list_llms().then(res => {
    llms.value = res.data
  })
}

const addModel = (key, name) => {
  factory.value = name;
  if(key == 1) {
    add_model_key_visible.value = true
  } else if(key == 0) {
    add_model_visible.value = true
  }
  instance.proxy.$forceUpdate()

}

const del_llm = (id) => {
  ElMessageBox.confirm(
      '确认删除吗?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    del({id: id}).then(res => {
      ElMessage.success("删除成功");
      list_data()
    })
  }).catch(() => {

  })
}

const batchDel = (key) => {
  ElMessageBox.confirm(
      '确认删除吗?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deletes({factory: key}).then(res => {
      ElMessage.success("删除成功")
      list_data()
    })
  }).catch(() => {

  })
}

</script>

<template>
  <div style="width: 80%; margin: auto">
    <div style="margin: 40px 0; display: flex; justify-content: space-between">
      <div>
        <h1 style="font-size: 24px">模型提供商</h1>
        <p>在此设置模型参数和 API KEY。</p>
      </div>
      <div>
        <el-button type="primary" :icon="Setting" @click="dialogVisible=true">系统模型设置</el-button>
      </div>
    </div>
    <div style="padding: 10px; ">
      <el-collapse v-model="selected">
        <el-collapse-item title="添加了的模型" name="1">
          <div>
            <ul>
              <li class="added_li" v-for="(value,key) in llms">
                <div style="display: flex;">
                  <div style="width: 40px;">
                    <img :src="`/imgs/${value.factory.logo}`" alt="" width="36">
                  </div>
                  <div style="width: 200px;padding-left: 20px;">
                    <p style="font-weight: bold;">{{key}}</p>
                    <p style="width: 180px;">{{ value.factory.tags }}</p>
                  </div>
                </div>
                <div style="width: 360px;">
                  <el-button :icon="Setting" style="width: 120px" @click="addModel(value.factory.key, key)">添加模型</el-button>
                  <el-button style="width: 120px" @click="batchDel(key)">删除</el-button>
                </div>
                <div style="height: 10px; clear: both;"></div>
                <ul class="added_item">
                  <li v-for="it in value.llms">
                    <span>{{ it.name }}</span>
                    <span class="model-type">{{ it.modelType }}</span>
                    <el-icon style="color: red; cursor: pointer;" @click="del_llm(it.id)"><CircleClose /></el-icon>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </el-collapse-item>
        <el-collapse-item title="待添加的模型" name="2">
          <div style="display: flex; flex-flow: wrap;">
            <div class="item" v-for="it in modelList.data" :key="it.name">
              <div>
                <img width="36" :src="'/imgs/' + it.logo" alt="">
              </div>
              <div style="font-size: 16px">
                {{it.name}}
              </div>
              <div class="desc">
                {{it.desc}}
              </div>
              <div>
                <el-link @click="addModel(it.key, it.name)">添加模型</el-link>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <Default_setup v-model="dialogVisible"></Default_setup>
    <Add_model v-model="add_model_visible" :factory="factory"></Add_model>
    <Add_model_key v-model="add_model_key_visible" :factory="factory"></Add_model_key>
  </div>
</template>

<style scoped>
.added_li {
  height: 200px;
  width: 100%;
  border-top: 1px solid #eeeeee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 18px;
  border: 1px solid #eaecf0;
  background: #e6e7eb;
  box-shadow: 0 1px 2px #1018280d;
  padding: 40px;
}

.added_li div:first-child{
  width: 150px;
  float: left;
}

.added_li div:nth-child(2) {
  width: 240px;
  float: right;
}

.added_item {
  border-top: 1px solid #eaecf0;
}

.added_item li {
  float: left;
  width: 180px;
  background: rgb(227, 240, 255);
  list-style: none;
  padding: 10px;
  margin: 20px;
  border-radius: 10px;
}

.model-type {
  background-color: rgb(184, 184, 184); 
  padding: 2px; border-radius: 4px;
  color: #fff; width: 100px; display: inline-block; 
  margin: 0 6px; 
  text-align: center;
}

.desc {
  white-space: nowrap; /* 确保文本不会换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 当文本超出容器时显示省略号 */
  width: 160px; /* 设置一个宽度，你可以根据需要调整 */
  height: 40px;
}

.item {
  height: 160px; width: 160px; margin: 10px;background: rgb(227, 240, 255); padding: 20px; border-radius: 20px
}

.item div {
  height: 40px;
  line-height: 40px;
}

.item div:nth-child(2) {
  font-weight: bold;
}

.item div:last-child {
  border-top: 1px solid #ccc;
}

</style>